<template>
  <div class="count-css scroll-bar">
    <div class="count-top-css">
      <el-select
        class="count-select-css"
        v-model="deviceValue"
        @change="onList()"
        filterable
        clearable
        placeholder="所有设备类型"
      >
        <el-option v-for="item in deviceType" :key="item.label" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-select
        class="count-select-css"
        v-model="customerValue"
        filterable
        clearable
        placeholder="所有客户"
        @change="onSearchProject()"
        @clear="onList()"
      >
        <el-option v-for="item in customerType" :key="item.label" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-select
        class="count-select-css"
        v-model="projectValue"
        @change="onList()"
        filterable
        clearable
        placeholder="所有项目"
      >
        <el-option v-for="item in projectType" :key="item.label" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-select class="count-select-css" v-model="timeValue" @change="onList()" filterable placeholder="">
        <el-option v-for="item in timeType" :key="item.label" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>

    <div class="count-content-css">
      <div class="content-left-box">
        <div class="content-left-year">
          <div class="name-text">
            <div class="count-top-name">年度通知统计</div>
            <div class="count-text">
              <span>保养总数：{{ yearNoticeCountMaintain }}</span>
              <span>报警总数：{{ yearNoticeCountAlarm }}</span>
            </div>
          </div>
          <div id="yearNoticeCount"></div>
        </div>
        <div class="content-left-month">
          <div class="name-text">
            <div class="count-top-name">本月通知统计</div>
            <div class="count-text">
              <span>保养总数：{{ monthNoticeCountMaintain }}</span>
              <span>报警总数：{{ monthNoticeCountAlarm }}</span>
            </div>
          </div>
          <div id="monthNoticeCount"></div>
        </div>
      </div>
      <div class="content-right-box">
        <div class="content-right-year">
          <div class="work-order-top">
            <div class="name-text">
              <div class="count-top-name">工单统计</div>
              <div class="count-text">
                <span>保养工单：{{ orderCountMaintain }}</span>
                <span>维修工单：{{ orderCountAlarm }}</span>
              </div>
            </div>
            <el-select
              class="count-top-select"
              v-model="departmentValue"
              filterable
              clearable
              @change="onWorkOrderCount()"
              placeholder="部门"
            >
              <el-option v-for="item in departmentSelectData" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="workOrderCount"></div>
        </div>
        <div class="content-right-month">
          <div class="content-right-police">
            <div class="count-top-name">报警等级统计</div>
            <div id="policeGrade" style="padding: 0px 20px"></div>
          </div>
          <div class="content-right-repair">
            <div class="repair-top">
              <div class="count-top-name">维修频次TOP10</div>
              <el-select class="count-top-select" v-model="repairValue" @change="onTopTen()">
                <el-option v-for="item in repairSelectData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="repair-table-box">
              <el-table :data="repairTableData" stripe height="280">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column prop="name" :label="repairValue === 1 ? '设备名称' : '客户名称'" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="count" label="工单数量"> </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  getDepartmentList,
  getCustomerList,
  getProjectList,
  getOrderTop,
  getNoticeGradeCount,
  getYearOrderCount,
  getNoticeCount
} from '@/api/maintenanceCountApi.js';
export default {
  name: '',
  data() {
    return {
      deviceType: [
        {
          label: '搬运类',
          value: 1
        },
        {
          label: '输送类',
          value: 2
        },
        {
          label: '包装类',
          value: 3
        },
        {
          label: '其他类',
          value: 4
        }
      ], //所有设备类型
      deviceValue: '',
      customerType: [], //所有客户
      customerValue: '',
      projectType: [], //所有项目
      projectValue: '',
      timeType: [
        {
          label: '2021',
          value: 2021
        }
      ], //所有项目
      timeValue: '2021',
      repairSelectData: [
        {
          label: '按设备名称',
          value: 1
        },
        {
          label: '按客户',
          value: 2
        }
      ],
      departmentSelectData: [], //部门下拉框数据
      departmentValue: '',
      repairValue: 1,
      repairTableData: [], //维修表格数据
      orderCountMaintain: '0', //工单统计保养工单
      orderCountAlarm: '0', //工单统计维修工单
      yearNoticeCountMaintain: '0', //年度统计保养
      yearNoticeCountAlarm: '0', //年度统计报警
      monthNoticeCountMaintain: '0', //月份统计保养
      monthNoticeCountAlarm: '0' //月份统计报警
    };
  },
  mounted() {
    let date = new Date();
    let year = date.getFullYear();
    if (year > 2021) {
      let dateValue = year - 2021;
      for (let i = 0; i < dateValue; i++) {
        let value = 2021 + (i + 1);
        this.timeType.push({
          label: value,
          value: value
        });
      }
    }
    this.timeValue = year;

    document.querySelector('.main').style.cssText = 'width: 1700px;overflow: hidden;';
    document.querySelector('.main-content').style.cssText = 'background-color: #f5f7fa;box-shadow: none;';
    this.onSelectData();
    this.onYearNoticeCount();
    this.onWorkOrderCount();
    this.onMonthNoticeCount();
    this.onPoliceGrade();
    this.onTopTen();
  },
  methods: {
    //下拉框所有请求数据
    onSelectData() {
      //部门
      getDepartmentList({ page: 1, page_size: 500 }).then(res => {
        res.data.list.map(item => {
          item.label = item.name;
          item.value = item.id;
          this.departmentSelectData.push(item);
        });
      });
      //客户
      getCustomerList({}).then(res => {
        res.data.map(item => {
          item.label = item.customer;
          item.value = item.id;
          this.customerType.push(item);
        });
      });
    },
    //选择客户查出项目
    onSearchProject() {
      this.onList();
      this.projectType = [];
      if (this.customerValue === '') {
        this.projectType = [];
        this.projectValue = '';
        return;
      }
      getProjectList({ page: 1, page_size: 5000, customer_id: this.customerValue }).then(res => {
        res.data.list.map(item => {
          item.label = item.project_name;
          item.value = item.id;
          this.projectType.push(item);
        });
      });
    },
    //搜索
    onList() {
      this.onYearNoticeCount();
      this.onWorkOrderCount();
      this.onMonthNoticeCount();
      this.onPoliceGrade();
      this.onTopTen();
    },
    //年度通知统计
    onYearNoticeCount() {
      let orderCountArra = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let orderCountArrm = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let myChart = echarts.init(document.getElementById('yearNoticeCount'));
      let option = {
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.25)',
          borderColor: 'rgba(0, 0, 0, 0.1)',
          trigger: 'axis',
          textStyle: { color: '#fff' }
        },
        textStyle: {
          color: '#606266'
        },
        legend: {
          top: '20',
          // right: '120',
          data: ['保养通知', '报警通知'],
          textStyle: {
            color: '#606266'
          },
          itemHeight: 10,
          itemWidth: 10
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDFE6',
              fontSize: 18
            }
          },
          axisLabel: {
            color: '#606266',
            padding: 3
          },
          axisTick: {
            show: true
          }
        },
        series: [
          {
            name: '保养通知',
            type: 'bar',
            data: orderCountArrm,
            itemStyle: {
              color: '#DCB0FF'
            }
          },
          {
            name: '报警通知',
            type: 'bar',
            data: orderCountArra,
            itemStyle: {
              color: '#FF8E8E'
            }
          }
        ]
      };
      let params = {
        type: this.deviceValue,
        customerId: this.customerValue,
        projectId: this.projectValue,
        year: this.timeValue
      };
      getNoticeCount(params).then(res => {
        this.yearNoticeCountMaintain = res.data.maintainTotal;
        this.yearNoticeCountAlarm = res.data.alarmTotal;
        res.data.maintainList.map((item, index) => {
          orderCountArrm[item.month - 1] = item.count;
        });
        res.data.alarmList.map((item, index) => {
          orderCountArra[item.month - 1] = item.count;
        });
        myChart.setOption(option);
      });
    },
    //工单统计
    onWorkOrderCount() {
      let orderCountArra = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let orderCountArrm = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let myChart = echarts.init(document.getElementById('workOrderCount'));
      let option = {
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.25)',
          borderColor: 'rgba(0, 0, 0, 0.1)',
          trigger: 'axis',
          textStyle: { color: '#fff' }
        },
        legend: {
          top: '20',
          // right: '120',
          data: ['保养', '维修'],
          textStyle: {
            color: '#606266'
          },
          itemHeight: 10,
          itemWidth: 20
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDFE6',
              fontSize: 18
            }
          },
          axisLabel: {
            color: '#606266',
            padding: 3
          },
          axisTick: {
            show: true
          },
          type: 'value'
        },
        series: [
          {
            name: '保养',
            type: 'line',
            data: orderCountArrm,
            itemStyle: {
              color: '#67C23A'
            }
          },
          {
            name: '维修',
            type: 'line',
            data: orderCountArra,
            itemStyle: {
              color: '#3378FF'
            }
          }
        ]
      };
      let params = {
        type: this.deviceValue,
        customerId: this.customerValue,
        projectId: this.projectValue,
        year: this.timeValue,
        department: this.departmentValue
      };
      getYearOrderCount(params).then(res => {
        this.orderCountMaintain = res.data.maintainTotal;
        this.orderCountAlarm = res.data.alarmTotal;
        res.data.maintainList.map((item, index) => {
          orderCountArrm[item.month - 1] = item.count;
        });
        res.data.alarmList.map((item, index) => {
          orderCountArra[item.month - 1] = item.count;
        });
        myChart.setOption(option);
      });
    },
    //本月通知统计
    onMonthNoticeCount() {
      let orderCountArra = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
      ];
      let orderCountArrm = [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
      ];
      let dayData = [];
      let myChart = echarts.init(document.getElementById('monthNoticeCount'));
      let option = {
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.25)',
          borderColor: 'rgba(0, 0, 0, 0.1)',
          trigger: 'axis',
          textStyle: { color: '#fff' }
        },
        legend: {
          top: '20',
          // right: '120',
          data: ['保养通知', '报警通知'],
          textStyle: {
            color: '#606266'
          },
          itemHeight: 10,
          itemWidth: 20
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dayData
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDFE6',
              fontSize: 18
            }
          },
          axisLabel: {
            color: '#606266',
            padding: 3
          },
          axisTick: {
            show: true
          },
          type: 'value'
        },
        series: [
          {
            name: '保养通知',
            type: 'line',
            data: orderCountArrm,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(220, 176, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(220, 176, 255, 0.3)'
                }
              ])
            },
            itemStyle: {
              color: '#DCB0FF'
            }
          },
          {
            name: '报警通知',
            type: 'line',
            data: orderCountArra,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255, 142, 142, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 142, 142, 0.3)'
                }
              ])
            },
            itemStyle: {
              color: '#FF8E8E'
            }
          }
        ]
      };
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      // let day = date.getDate();
      let dayCount = new Date(year, month, 0).getDate(); //当月有多少天
      if (month < 10) {
        month = '0' + month;
      }
      for (let i = 0; i < dayCount; i++) {
        dayData.push(i + 1);
      }
      let params = {
        type: this.deviceValue,
        customerId: this.customerValue,
        projectId: this.projectValue,
        year: this.timeValue,
        month: month
      };
      getNoticeCount(params).then(res => {
        this.monthNoticeCountMaintain = res.data.maintainTotal;
        this.monthNoticeCountAlarm = res.data.alarmTotal;
        res.data.maintainList.map((item, index) => {
          orderCountArrm[item.day - 1] = item.count;
        });
        res.data.alarmList.map((item, index) => {
          orderCountArra[item.day - 1] = item.count;
        });
        myChart.setOption(option);
      });
    },
    //报警等级统计
    onPoliceGrade() {
      let tableData = [
        { value: 0, name: '一级报警' },
        { value: 0, name: '二级报警' },
        { value: 0, name: '三级报警' },
        { value: 0, name: '四级报警' },
        { value: 0, name: '五级报警' }
      ];
      let myChart = echarts.init(document.getElementById('policeGrade'));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10',
          left: 'center',
          itemHeight: 10,
          itemWidth: 10
        },
        color: ['#5472C6', '#67C8FF', '#68E8E8', '#FAC858', '#EE6666'],
        series: [
          {
            top: '60',
            type: 'pie',
            radius: ['40%', '70%'],
            // width: 350,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{d} %}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              rich: {
                time: {
                  fontSize: 13,
                  color: '#606266'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: tableData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let params = {
        type: this.deviceValue,
        customerId: this.customerValue,
        projectId: this.projectValue,
        year: this.timeValue
      };
      getNoticeGradeCount(params).then(res => {
        res.data.map((item, index) => {
          tableData[item.grade - 1].value = item.count;
        });
        myChart.setOption(option);
      });
    },
    //top10
    onTopTen() {
      let params = {
        type: this.deviceValue,
        customerId: this.customerValue,
        projectId: this.projectValue,
        year: this.timeValue,
        condition: this.repairValue
      };
      getOrderTop(params).then(res => {
        this.repairTableData = res.data;
      });
    }
  },
  beforeDestroy() {
    document.querySelector('.main').style.cssText = 'width: 100%;overflow: auto;';
    document.querySelector('.main-content').style.cssText =
      'background-color: #fff;box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);';
  }
};
</script>

<style lang="scss" scoped>
#yearNoticeCount {
  width: 100%;
  height: 100%;
}
#workOrderCount {
  width: 100%;
  height: 100%;
}
#monthNoticeCount {
  width: 100%;
  height: 100%;
}
#policeGrade {
  width: 100%;
  height: 90%;
}
.count-css {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.count-margin {
  margin-right: 15px;
}

.count-top-css {
  width: 1665px;
  height: 75px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
}
.count-select-css {
  width: 200px;
  margin-right: 10px;
}

.name-text {
  display: flex;
  .count-text {
    margin-left: 25px;
    margin-top: 2px;
    span {
      margin-right: 20px;
    }
  }
}

.count-content-css {
  width: 1660px;
  height: calc(100% - 100px);
  display: flex;
  //左边布局
  .content-left-box {
    width: 830px;
    height: 100%;
    margin-top: 15px;
  }
  .content-left-year {
    width: 100%;
    height: 50%;
    background-color: #fff;
    margin-bottom: 15px;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
    padding: 15px 0px 0px 5px;
  }
  .content-left-month {
    width: 100%;
    height: 50%;
    background-color: #fff;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
    padding: 15px 0px 0px 5px;
  }
  //右边布局
  .content-right-box {
    width: 830px;
    height: 100%;
    margin-top: 15px;
    margin-left: 15px;
  }
  .content-right-year {
    width: 100%;
    height: 50%;
    background-color: #fff;
    margin-bottom: 15px;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
    padding: 15px 0px 0px 5px;
  }
  .content-right-month {
    width: 100%;
    height: 50%;
    display: flex;
    .content-right-police {
      width: 50%;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
      margin-right: 15px;
      padding: 15px 0px 0px 5px;
    }
    .content-right-repair {
      width: 49%;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
      padding: 15px 0px 0px 5px;
    }
    .repair-top {
      display: flex;
      justify-content: space-between;
    }
  }
}
//年度通知统计
.count-top-name {
  position: relative;
  padding-left: 15px;
  font-size: 18px;
  color: #3378ff;
}
.count-top-name:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 2px;
  height: 16px;
  background-color: #3378ff;
}
//工单统计
.work-order-top {
  display: flex;
  justify-content: space-between;
}
//维修频次TOP10
.count-top-select {
  width: 120px;
  margin-right: 10px;
  margin-top: -8px;
}
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
</style>
